<template>
  <div>
    <button>Hello, {{ name }}</button>
    <p>还差 {{ dao100 }} 到100岁</p>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
// 定义 props

//    1. 数组写法
// defineProps(["name", "age"]);

//    2. 对象写法， 采用 运行时类型声明
// const props = defineProps({
//   name: String,
//   age: {
//     type: Number,
//     default: 18,
//   },
//   gender: {
//     type: String,
//     required: true,
//   },
// });

//    3. TS写法     采用 纯TS类型声明
//        没法设置默认值，需要用上额外的 withDefaults
interface IProps {
  name?: string;
  age?: number;
  gender: string;
}
const props = withDefaults(defineProps<IProps>(), {
  age: 18,
});

const dao100 = computed(() => 100 - (props.age ? props.age : 0));
</script>
